<template>
    <div class="order_analysis">
        <header>
            <div class="header_one">订单分析</div>
            <div class="header_two">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-menu-item index="1">销售分析</el-menu-item>
                    <el-menu-item index="2">单品销售</el-menu-item>
                </el-menu>
            </div>
        </header>
        <!--销售分析-->
        <div class="charts_one" v-if="activeIndex==1" v-loading="loading1">
            <div class="charts_one_top">
                <div class="charts_one_top_menu">
                    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect2">
                        <el-menu-item index="1" style="font-size:20px;">销售额</el-menu-item>
                        <el-menu-item index="2" style="font-size:20px;">订单量</el-menu-item>
                    </el-menu>
                </div>
                <div class="charts_one_top_date" style="display:flex;align-items:center;">
                	<div style="display:flex;align-items:center;margin:20px 40px 0 0;">
                        <el-tabs v-model="activeName2" @tab-click="handleClick2">
                            <el-tab-pane label="本周"></el-tab-pane>
                            <el-tab-pane label="本月"></el-tab-pane>
                            <el-tab-pane label="全年"></el-tab-pane>
                        </el-tabs>
                    </div>
                    <el-date-picker @change="selTime" v-model="value1" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>
                </div>
                <div class="charts_one_top_select">
                    <p>门店</p>
                    <el-select :disabled="disA" clearable @change="selStore" v-model="value2" placeholder="请选择" style="width:250px;">
                        <el-option v-for="item in options2" :key="item.COMP_ID" :label="item.SHOP_NAME" :value="item.COMP_ID"> </el-option>
                    </el-select>
                </div>
            </div>
            <div class="charts_one_bottom">
                <div class="charts_one_bottom_left" v-if="arrs.length>0">
                    <p @click="changes(1)" class="changes">
                        <el-popover ref="popover1" placement="top-start" title="" width="200" trigger="hover" content="柱形图和折线图切换"> </el-popover>
                        <el-button v-popover:popover1>切换</el-button>
                    </p>
                    <x-chart :id="id" :option="option"></x-chart>
                </div>
                <div class="charts_one_bottom_left" v-else></div>
                <div class="charts_one_bottom_right">
                    <div class="charts_one_bottom_right_title">门店销售额排名</div>
                    <div class="charts_one_bottom_right_datas">
                        <div class="charts_one_bottom_right_data" v-for="(item,index) in storeSumData">
                            <p v-if="item.RANKINGS==1||item.RANKINGS==2||item.RANKINGS==3" class="whites">{{item.RANKINGS}}</p>
                            <p v-else class="grays">{{item.RANKINGS}}</p>
                            <p class="grays">{{item.SHOPNAME}}</p>
                            <p class="grays">{{item.MONEY}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--单品销售-->
        <div class="charts_two" v-if="activeIndex==2" v-loading="loading2">
            <div class="t_conditions">
                <div class="t_condition_1">
                    <div class="t_range">
                        <span>范围：</span>
                        <el-select clearable v-model="value3" placeholder="请选择" style="width:300px;">
                            <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </div>
                    <div class="t_store">
                        <span>店名：</span>
                        <el-select clearable v-model="value4" placeholder="请选择" style="width:300px;">
                            <el-option v-for="item in options4" :key="item.COMP_ID" :label="item.SHOP_NAME" :value="item.COMP_ID"> </el-option>
                        </el-select>
                    </div>
                    <el-button type="danger" style="background:#e7251a;width:70px;" @click.native="querys">查询</el-button>
                    <el-button @click.native="resets" style="width:70px;">重置</el-button>
                    <el-button @click.native="exports" style="width:70px;">导出</el-button>
                </div>
                <div class="t_condition_2">
                    <div class="t_date">
                        <span>选择日期：</span>
                        <el-date-picker v-model="value5" type="daterange" :picker-options="pickerOptions2" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>
                    </div>
                </div>
                <div class="t_infos">
                    <div class="t_info1">
                        <p>
                            <label style="visibility:hidden;">我</label>代金券：
                            <span>￥{{singleData.VOUCHERS}}</span>
                        </p>
                        <p>微信支付：
                            <span>￥{{singleData.WXPAY}}</span>
                        </p>
                        <p>支付宝：
                            <span>￥{{singleData.ALIPAY}}</span>
                        </p>
                    </div>
                    <div class="t_info2">
                        <p>支付合计：
                            <span>￥{{singleData.PAYTOTAL}}</span>
                        </p>
                        <p>合计金额：
                            <span>￥{{singleData.TOTALAMOUNT}}</span>
                        </p>
                        <p>活动总数：
                            <span>{{singleData.SAFETRAVELCOUNT}}</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="sale_chart2" v-if="arrs.length>0">
                <p @click="changes(2)" class="changes2">
                    <el-popover ref="popover1" placement="top-start" title="" width="200" trigger="hover" content="柱形图和折线图切换"> </el-popover>
                    <el-button v-popover:popover1>切换</el-button>
                </p>
                <x-chart :id="id" :option="option"></x-chart>
            </div>
            <div class="sale_chart2" v-else></div>
        </div>
    </div>
</template>
<script>
    import XChart from '@/views/statistics/charts'
    import options from '@/assets/js/charts_sales'
    import dateSelect from '@/assets/js/date_time_picker.js' //日期选择器数据封装    
    import { asyncRouterMap } from '@/router/index'
    import { setCookie, getCookie } from '@/assets/js/cookie'
    export default {
        name: 'order_analysis',
        data() {
            let option = options.bar;
            return {
                id: 'test',
                option: option,
                activeIndex: '1', //选中的menu 1-销售分析 2-单品分析
                activeIndex2: '1', //选中的menu 1-销售额 2-订单量
                value1: '', //开始结束时间
                pickerOptions1: {
                    shortcuts: [{
                        text: '最近一天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一年',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value2: '', //门店
                options2: [],
                value3: '', //范围
                options3: [{
                    value: 1,
                    label: 'app'
                }, {
                    value: 2,
                    label: 'ipad'
                }],
                value4: '', //店名
                options4: [],
                value5: [], //选择日期
                pickerOptions2: dateSelect,
                loading1: true,
                loading2: true,
                flags: 4, //1-今日 2-本周 3-本月 4-本年
                saleSumData: '', //销售额
                orderSumData: '', //订单量
                storeSumData: '', //门店销售额排名
                arrs: [], //图表封装数据
                singleData: '', //单品销售所有数据
                singleSaleData: [], //单品销售数据 
                activeName2: '2', //标签选中的名字 0-本周 1-本月 2-全年
                arr_one: [],
                arr_two: [],
                str_one: '', //一级菜单字符串
                str_two: '', //二级菜单字符串
                disA: false, //下拉框是否禁用
            }
        },
        computed: {
            //请求参数
            objs() {
                let obj = {};
                if(this.value1 === null) {
                    this.value1 = '';
                }                
                obj.TIMETYPE = this.flags;
                obj.SELECTTYPE = +this.activeIndex2; 
                if(this.value1.length > 0){
                	obj.STARTTIME = this.value1[0].getTime();
                	obj.ENDTIME = this.value1[1].getTime();	
                }                                
                if(this.value2 && this.value2 !== 'QB'){
                	obj.COMP_ID = this.value2;
                }
                return obj;
            },
        },
        created() {
        	/* ----------权限管理---------- */
            if(getCookie('compId') !== 0) {
            	this.disA = true;
                let self = this;
                //console.log(asyncRouterMap);
                this.$axiosPost('/4SCAFE/cafeUser/getMenuListByUserId.action', {
                    CAFEUSER_ID: getCookie('userId')
                }).then(res => {
                    //console.log(res);
                    if(res.STATUS_CODE === 1) {
                        //动态加载路由
                        res.MENU_DATA.forEach((v) => {
                            //一级菜单
                            self.arr_one.push(v.MENUID);
                            //二级菜单
                            v.MENUS.forEach((n) => {
                                self.arr_two.push(n.SECMENUNAME);
                            })
                        })
                    }
                    self.str_one = self.arr_one.join(',');
                    self.str_two = self.arr_two.join(',');
                    //0-功能  11-管理  19-统计  20-设置  
                    //asyncRouterMap[0].hidden = true;  
                    //asyncRouterMap[0].children[0].hidden = true;
                    //--------------------------功能----------------------------
                    if(self.str_one.indexOf(2) === -1) {
                        this.$set(asyncRouterMap[0], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('营销管理') === -1) {
                        this.$set(asyncRouterMap[0].children[0], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('优惠券管理') !== -1) {                    	
                        this.$set(asyncRouterMap[0].children[1], 'hidden', false);
                    }
                    if(self.arr_two.indexOf('广告位管理') === -1) {
                        this.$set(asyncRouterMap[0].children[2], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('积分商城管理') === -1) {
                        this.$set(asyncRouterMap[0].children[3], 'hidden', true);
                    }
                    //--------------------------功能----------------------------
                    //--------------------------管理----------------------------
                    if(self.str_one.indexOf(3) === -1) {
                        this.$set(asyncRouterMap[11], 'hidden', true);
                    }
                    if(self.str_two.indexOf('门店管理') === -1) {
                        this.$set(asyncRouterMap[11].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('商品管理') === -1) {
                        this.$set(asyncRouterMap[11].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('会员管理') === -1) {
                        this.$set(asyncRouterMap[11].children[2], 'hidden', true);
                    }
                    if(self.str_two.indexOf('订单管理') === -1) {
                        this.$set(asyncRouterMap[11].children[3], 'hidden', true);
                    }
                    if(self.str_two.indexOf('退款管理') === -1) {
                        this.$set(asyncRouterMap[11].children[4], 'hidden', true);
                    }
                    //--------------------------管理----------------------------
                    //--------------------------统计----------------------------
                    if(self.str_one.indexOf(4) === -1) {
                        this.$set(asyncRouterMap[19], 'hidden', true);
                    }
                    if(self.str_two.indexOf('用户分析') === -1) {
                        this.$set(asyncRouterMap[19].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('订单分析') === -1) {
                        this.$set(asyncRouterMap[19].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('储存卡分析') === -1) {
                        this.$set(asyncRouterMap[19].children[2], 'hidden', true);
                    }
                    //--------------------------统计----------------------------
                    //--------------------------设置----------------------------
                    if(self.str_one.indexOf(5) === -1) {
                        this.$set(asyncRouterMap[20], 'hidden', true);
                    }
                    if(self.str_two.indexOf('积分设置') === -1) {
                        this.$set(asyncRouterMap[20].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('账号设置') === -1) {
                        this.$set(asyncRouterMap[20].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('系统设置') === -1) {
                        this.$set(asyncRouterMap[20].children[2], 'hidden', true);
                    }
                    //--------------------------设置----------------------------
                    console.log(self.str_one, self.str_two);
                })
            }
            /* ----------权限管理---------- */
            this.get4SCafeShopList();
            let d = new Date();
            let dd = new Date();
            dd.setDate(dd.getDate() - 365);
            this.value1 = [dd, d]; //默认为最近一年            
        },
        methods: {
            //获取所有门店
            get4SCafeShopList() {
                this.$axiosPost('/4SCAFE/CafeActivitySystem/get4SCafeShopList.action').then(res => {
                    if(res.STATUS_CODE === 1) {
                        this.options2 = this.options4 = res.SHOP_LIST;
                        //门店列表增加 全部 二字
                        this.options2.unshift({
                        	COMP_ID:'QB',
                        	SHOP_NAME:'全部'
                        });
                        if(getCookie('compId')) {
                            this.value2 = getCookie('compId')
                        } else {
                            this.value2 = res.SHOP_LIST[0].COMP_ID;
                        }
                        this.saleA();
                    }
                })
            },
            //销售分析
            saleA() {
                let self = this;
                let arr = [];
                let y = '';
                let name = '';
                //console.log(options.bar);
                this.$axiosPost('/4SCAFE/OrderStatistics/salesAnalysis.action', this.objs).then(res => {
                    //console.log(res);
                    this.loading1 = true;
                    if(res.STATUS_CODE === 1) {
                        this.loading1 = false;
                        this.storeSumData = res.SHOPTOTALFEEARR;
                        this.saleSumData = res.MONEYARR;
                        this.orderSumData = res.QUANTITYARR;
                        if(this.activeIndex2 == 1) {
                            this.saleSumData.forEach(function(v) {
                                self.arrs.push(v.MONEY);
                                arr.push(v);
                                options.bar.xAxis.categories.push(v.TIME);
                            })
                            y = JSON.parse(JSON.stringify(arr).replace(/MONEY/g, "y"));
                            name = JSON.parse(JSON.stringify(y).replace(/TIME/g, "name"));
                            options.bar.series[0].name = '销售额';
                        } else if(this.activeIndex2 == 2) {
                            this.orderSumData.forEach(function(v) {
                                self.arrs.push(v.QUANTITY);
                                arr.push(v);
                                options.bar.xAxis.categories.push(v.TIME);
                            })
                            y = JSON.parse(JSON.stringify(arr).replace(/QUANTITY/g, "y"));
                            name = JSON.parse(JSON.stringify(y).replace(/TIME/g, "name"));
                            options.bar.series[0].name = '订单量';
                        }
                        if(this.arrs.length > 0) {
                            options.bar.series[0].data = name;
                        }
                    }
                })
            },
            handleClick2(tab, event) {
                this.arrs = [];
                let d = new Date();
                let dd = new Date();
                if(tab.index === '0') {
                    dd.setDate(dd.getDate() - 7);
                    this.flag = 1;
                } else if(tab.index === '1') {
                    dd.setDate(dd.getDate() - 30);
                    this.flag = 2;
                } else if(tab.index === '2') {
                    dd.setDate(dd.getDate() - 365);
                    this.flag = 3;
                }
                this.value1 = [dd, d];
                this.saleA();
            },
            //销售分析 单品销售 切换
            handleSelect(key, keyPath) {
                this.loading1 = true;
                this.loading2 = true;
                this.arrs = [];
                if(key == 1) {
                    this.activeIndex = '1';
                    this.saleA();
                } else if(key == 2) {
                    this.activeIndex = '2';
                    let d = new Date(),
                        dd = new Date();
                    dd.setDate(dd.getDate() - 30);
                    this.value5 = [dd, d]; //默认为最近一个月
                    this.querys();
                }
            },
            //销售额 订单量 切换
            handleSelect2(key, keyPath) {
                //console.log(key);
                this.arrs = [];
                if(key == 1) {
                    this.activeIndex2 = '1';
                } else if(key == 2) {
                    this.activeIndex2 = '2';
                }
                this.saleA();
            },
            //时间切换
            selTime() {
            	if(this.value1.length === 0 || this.value1 === null) {
                    this.$alert('请选择日期', '提示', {
                        confirmButtonText: '确定'
                    })
                    this.activeName2 = '4';                    
                    return
                }
                this.arrs = [];
                let aa = this.value1[0].getTime();
                let bb = this.value1[1].getTime();
                let d = new Date();
                let dd = new Date();
                if(bb - aa > 2592000000 && bb - aa !== 31536000000) {
                    this.$alert('选择日期不可超过30天,请重新选择', '提示', {
                        confirmButtonText: '确定',
                        callback: action => {                        	
                            this.value1 = [];                            
                            this.activeName2 = '4';                            
                        }
                    });
                } else if(bb - aa === 31536000000) {
                    this.activeName2 = '2';
                    this.flag = 3;
                    this.saleA();
                } else if(bb - aa === 2592000000) {
                    this.activeName2 = '1';
                    this.flag = 2;
                    this.saleA();
                } else if(bb - aa === 604800000) {
                    this.activeName2 = '0';
                    this.flag = 1;
                    this.saleA();
                } else {
                    this.activeName2 = '3';
                    this.flag = 4;
                    this.saleA();
                }                                  
            },
            //选店切换
            selStore() {
                this.arrs = [];
                this.saleA();
            },
            //查询
            querys() {
                let self = this;
                let arr = [];
                let y = '';
                let name = '';
                if(this.value5 === null) {
                    this.value5 = '';
                }
                if(this.value5.length === 0) {
                    this.$alert('请选择日期', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                let obj = {};
                obj.USERIDS = '132084,132086,116302,127986,132090,129770,129774,116822,116834,116848,137428,135298,134822,115169,137426,113809,114186';
                this.value3 ? obj.SELECTTYPE = this.value3 : null;
                if(this.value5.length > 0) {
                    obj.STARTTIME = this.value5[0].getTime();
                    obj.ENDTIME = this.value5[1].getTime();
                }
                this.value4 ? obj.COMPID = this.value4 : null;
                //console.log(obj);return;
                this.$axiosPost('/4SCAFE/OrderStatistics/singleProSalesAnalysis.action', obj).then(res => {
                    this.loading2 = true;
                    //console.log(res);
                    if(res.STATUS_CODE === 1) {
                        options.bar.series[0].name = '单品售卖（笔）';
                        this.loading2 = false;
                        this.singleData = res;
                        this.singleSaleData = res.SINGLEPROARR;
                        this.singleSaleData.forEach(function(v) {
                            self.arrs.push(+v.NUM);
                            arr.push(v);
                            options.bar.xAxis.categories.push(v.SERNAME);
                        })
                        //console.log(arr);
                        y = JSON.parse(JSON.stringify(arr).replace(/NUM/g, "y"));
                        name = JSON.parse(JSON.stringify(y).replace(/SERNAME/g, "name"));
                        name.forEach(function(v) {
                            v.y = +v.y;
                        })
                        if(this.arrs.length > 0) {
                            options.bar.series[0].data = name;
                        }
                    }
                })
            },
            //重置
            resets() {
                this.value3 = this.value4 = this.value5 = '';
            },
            //导出
            exports() {
                if(this.value5 === null) {
                    this.value5 = '';
                }
                if(this.value5.length === 0) {
                    this.$alert('请选择日期', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                let obj = {},
                    ur = '';
                obj.USERIDS = '132084,132086,116302,127986,132090,129770,129774,116822,116834,116848,137428,135298,134822,115169,137426,113809,114186';
                this.value3 ? obj.SELECTTYPE = this.value3 : null;
                if(this.value5.length > 0) {
                    obj.STARTTIME = this.value5[0].getTime();
                    obj.ENDTIME = this.value5[1].getTime();
                }
                this.value4 ? obj.COMPID = this.value4 : null;
                ur += 'USERIDS=' + obj.USERIDS;
                if(this.value3) {
                    ur += '&SELECTTYPE=' + obj.SELECTTYPE;
                }
                if(this.value4) {
                    ur += '&COMPID=' + obj.COMPID;
                }
                if(this.value5.length > 0) {
                    ur += '&STARTTIME=' + obj.STARTTIME + '&ENDTIME=' + obj.ENDTIME;
                }
                //console.log(ur);return;
                let urll = window.getIps + '/4SCAFE/CafeExport/exportCafeExcel.action?' + ur;
                window.open(urll);
            },
            //切换图表类型
            changes(id) {
                this.arrs = [];
                if(options.bar.chart.type === 'column') {
                    this.$set(options.bar.chart, 'type', 'line');
                } else {
                    this.$set(options.bar.chart, 'type', 'column');
                }
                if(id === 1) {
                    this.saleA();
                } else if(id === 2) {
                    this.querys();
                }
            },
        },
        components: {
            XChart
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .order_analysis {
        min-height: 100%;
        background: #f0f2f5;
        header {
            background: #fff;
            .header_one {
                font-size: 24px;
                font-weight: 700;
                padding: 40px 30px;
            }
            .header_two {
                padding-left: 20px;
            }
        }
        .charts_one {
            width: 97%;
            height: 600px;
            margin: 40px auto;
            background: #fff;
            .charts_one_top {
                display: flex;
                align-items: center;
                justify-content: space-around;
                border-bottom: 1px solid #DCDCDC;
                padding-bottom: -10px;
                .charts_one_top_select {
                    display: flex;
                    align-items: center;
                    p {
                        width: 85px;
                        height: 40px;
                        text-align: center;
                        line-height: 40px;
                        border: 1px solid #dcdfe6;
                        border-top-left-radius: 4px;
                        border-bottom-left-radius: 4px;
                        background: #ebebeb;
                        color: #606266;
                    }
                }
            }
            .charts_one_bottom {
                display: flex;
                padding-top: 20px;
                .charts_one_bottom_left {
                    width: 75%;
                    height: 400px;
                    .changes {
                        text-align: right;
                        padding-right: 100px;
                        font-size: 22px;
                        span:nth-of-type(1) {
                            cursor: pointer;
                            &:hover {
                                text-decoration: underline;
                            }
                        }
                        span:nth-of-type(2) {
                            font-size: 16px;
                        }
                    }
                }
                .charts_one_bottom_right {
                    width: 25%;
                    height: 400px;
                    margin-left: 20px;
                    .charts_one_bottom_right_title {
                        padding: 20px 0;
                        font-size: 24px;
                        font-weight: 700;
                    }
                    .charts_one_bottom_right_datas {
                        .charts_one_bottom_right_data {
                            width: 80%;
                            display: flex;
                            justify-content: space-between;
                            margin-top: -15px;
                            p:nth-of-type(1) {
                                width: 30px;
                                height: 30px;
                                text-align: center;
                                line-height: 30px;
                            }
                            .whites {
                                border-radius: 50%;
                                background: #314659;
                                color: #fff;
                            }
                            .grays {
                                height: 30px;
                                text-align: center;
                                line-height: 30px;
                                color: #696969;
                            }
                        }
                    }
                }
            }
        }
        .charts_two {
            width: 97%;
            margin: 40px auto;
            padding: 25px;
            background: #fff;
            .t_conditions {
                span {
                    white-space: nowrap;
                }
                .t_condition_1 {
                    display: flex;
                    height: 40px;
                    .t_store {
                        margin: 0 105px 0 35px;
                    }
                }
                .t_condition_2 {
                    display: flex;
                    .t_date {
                        margin-top: 20px;
                        margin-bottom: 10px;
                    }
                }
                .t_infos {
                    p {
                        span {
                            color: #696969;
                        }
                    }
                    .t_info1 {
                        display: flex;
                    }
                    .t_info2 {
                        display: flex;
                    }
                    p {
                        width: 350px;
                    }
                }
            }
            .sale_chart2 {
                width: 100%;
                height: 500px;
                .changes2 {
                    text-align: right;
                    padding-right: 100px;
                    font-size: 22px;
                    span:nth-of-type(1) {
                        cursor: pointer;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                    span:nth-of-type(2) {
                        font-size: 16px;
                    }
                }
            }
        }
    }
</style>